<!--
 * @Author: 冯本桥
 * @Date: 2024-10-25 14:43:05
 * @LastEditTime: 2024-10-26 09:13:13
 * @LastEditors: 冯本桥
 * @Description:
 * @FilePath: \teach_system_fe\src\components\Business\Video\index.vue
-->
<template lang="pug">
  video(
    class="video-js vjs-default-skin vjs-big-play-centered"
    controls
    preload="auto"
    ref="singleVideo"
    style='width: 100%;height: 100%'
    :poster="poster"
  )
</template>
<script>
import 'video.js/dist/video-js.css'
import videojs from 'video.js'
import 'videojs-contrib-hls'

export default {
  props: {
    url: {
      type: String,
      default: ''
    },
    poster: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      singlePlayer: null // 播放器
    }
  },
  watch: {
    url (val) {
      if (val && this.singlePlayer) {
        this.videoPlay()
      }
    },
    singlePlayer (val) {
      if (val && this.url) {
        this.videoPlay()
      }
    }
  },
  mounted () {
    this.singlePlayer = videojs(this.$refs.singleVideo, {
      autoplay: true,
      controls: true
    })
  },
  beforeDestroy () {
    console.log('beforeDestroy')
    this.stopPlay()
  },
  methods: {
    videoPlay () {
      const { url } = this
      this.singlePlayer.src({ src: url, type: 'application/x-mpegURL' })
      this.singlePlayer.play()
    },

    stopPlay () {
      this.singlePlayer.pause()
      this.singlePlayer.dispose()
    }
  }
}
</script>
